<template>
    <div class="allbody">
        <div class="header">
            <div class="position">{{ PositionDetail.recruitName }}</div>
            <div class="salary">{{ PositionDetail.wage }}</div>

            <div class="interest" @click="interestClicked()"
                v-if="this.$store.state.IsSeeker === true && this.$store.state.companySeeker === false">
                <svg class="icon" aria-hidden="true" v-if="interest === false">
                    <use xlink:href="#icon-jiaxingshoucang"></use>
                </svg>
                <svg class="icon" aria-hidden="true" v-if="interest === true">
                    <use xlink:href="#icon-jiaxingshoucangtianchong"></use>
                </svg>
                <span style="display: block;color:#fff;">收藏</span>
            </div>
            <el-select v-model="value" placeholder="投简历" class="submit_resume"
                v-if="this.$store.state.IsSeeker === true && this.$store.state.companySeeker === false">
                <el-option v-for="item in resume_type" :key="item.value" :label="item.label" :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
            </el-select>

            <el-button type="text" @click="deliverResume" id="btn_deliver" icon="el-icon-upload2"
                v-if="this.$store.state.IsSeeker === true && this.$store.state.companySeeker === false">确定投递</el-button>

            <div class="job_activities">
                <div class="activity_1">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caidan"></use>
                    </svg>
                    <span>{{ PositionDetail.workAction1 }}</span>
                </div>
                <div class="activity_2">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caidan"></use>
                    </svg>
                    <span>{{ PositionDetail.workAction2 }}</span>
                </div>

            </div>
            <el-button type="text" icon="el-icon-edit" class="edit"
                v-if="this.$store.state.IsSeeker === false && this.$store.state.companySeeker === false"
                @click="dialogFormVisible = true">编辑</el-button>
            <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
                <el-form :model="PositionDetail" ref="form">
                    <el-form-item label="职位描述" prop="seekersName">
                        <el-input v-model="PositionDetail.descriptions" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="福利待遇" prop="age">
                        <el-input v-model="PositionDetail.welfare" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="工作需求" prop="education">
                        <el-input v-model="PositionDetail.requires" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="能力要求" prop="email">
                        <el-input v-model="PositionDetail.responsibility" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="工作活动1" prop="email">
                        <el-input v-model="PositionDetail.workAction1" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="工作活动2" prop="email">
                        <el-input v-model="PositionDetail.workAction2" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit()
                    dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <div class="left" :style="{ width: seekerWidth }">
            <div class="job_text">
                <h3>职位描述</h3>
                <p>1、{{ PositionDetail.descriptions }}</p>
                <!-- <p>2、这里是职位描述</p>
                <p>3、这里是职位描述</p> -->
                <span>福利待遇</span>
                <p>1、{{ PositionDetail.welfare }}</p>
                <!-- <p>2、这里是福利待遇</p>
                <p>3、这里是福利待遇</p> -->
                <span>工作需求</span>
                <p>1、{{ PositionDetail.requires }}</p>
                <span>能力要求</span>
                <p>1、{{ PositionDetail.responsibility }}</p>
                <!-- <p>3、这里是任职要求</p> -->
            </div>

        </div>
        <div class="right" @click="gotoCompanyInfo()" v-if="this.$store.state.IsSeeker === true">
            <span id="companyBasis">公司基本信息</span>
            <div class="right_item">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-loufang"></use>
                </svg>
                <span>公司名</span>
            </div>
            <div class="right_item">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gongwenbao"></use>
                </svg>
                <span>公司类型</span>
            </div>
            <div class="right_item">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-loufang1"></use>
                </svg>
                <span>公司地址</span>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import axios from 'D:\\job_management\\src\\axiosConfig.js'
export default {
    data() {
        return {
            PositionDetail: {
                recruitName: '',
                wage: '',
                education: '',
                workAction1: '',
                workAction2: '',
                welfare: '',
                requires: '',
                responsibility: '',
                descriptions: ''
            },
            resume_type: [
                {
                    label: '求职意向',
                    value: '简历编号'
                },
                {
                    label: '求职意向',
                    value: '简历编号1'
                },
                {
                    label: '求职意向',
                    value: '简历编号2'
                },
                {
                    label: '求职意向',
                    value: '简历编号3'
                },
                {
                    label: '求职意向',
                    value: '简历编号4'
                },
                {
                    label: '求职意向',
                    value: '简历编号5'
                },
                {
                    label: '求职意向',
                    value: '简历编号6'
                }, {
                    label: '求职意向',
                    value: '简历编号7'
                },
            ],

            interest: false,
            value: '',
            dialogFormVisible: false,

            interestList: [],

        }
    },
    computed: {
        ...mapState(['IsSeeker']),
        isSeeker() {
            return this.IsSeeker === true;
        },
        seekerWidth() {
            return this.isSeeker ? '1050px' : '1300px';
        }

    },
    created() {
        //如果是求职者，则显示求职者的职业详情页面
        if (this.$store.state.IsSeeker === true) {
            axios.post(`/seekers/recommend/recruit_information/${this.$store.state.recruitId}`,

            )
                .then(response => {
                    this.$data.PositionDetail = response.data.data
                })
                .catch(error => {
                    console.log(error);
                })
            axios.get(`seekers/recommend/recruit_information/${this.$store.state.account}`,

            ).then(res => {
                this.resume_type.splice(res.data.data.length)
                for (let i = 0; i < res.data.data.length; i++) {
                    this.resume_type[i].label = res.data.data[i].expectionJob
                    this.resume_type[i].value = res.data.data[i].resumeId
                }
            }).catch(err => {
                console.log(err)
            })
            axios.get(`seekers/interested/${this.$store.state.account}/1`
            ).then(res => {
                for (let i = 0; i < res.data.data.length; i++) {
                    if (res.data.data[i].recruitId === this.$store.state.recruitId) {
                        this.$data.interest = true
                    }
                    this.interestList = res.data.data
                }
            })
        }
        // 如果是公司，则显示公司的职业详情页面
        else {
            axios.get(`company/recruitdetail`,
                {
                    params: {
                        recruitId: this.$store.state.recruitId
                    }
                }
            ).then(res => {
                this.PositionDetail = res.data.data.recruit
            })
        }

    },
    beforeDestroy() {
        if (this.$store.state.IsSeeker === true) {
            console.log(this.$data.interest);
            // 在用户离开此页面时如果收藏为true，则像后端发送数据，否则则不用
            if (this.$data.interest === true) {
                for (let i = 0; i < this.interestList.length; i++) {
                    if (this.interestList[i].recruitId === this.$store.state.recruitId) {
                        return
                    }
                }
                axios.post(`/seekers/recommend/recruit_information/interest/${this.$store.state.recruitId}/${this.$store.state.account}`
                ).then(res => { console.log(res); }).catch(err => { console.log(err); })
            }
        }

    },
    methods: {
        interestClicked() {
            if (this.$data.interest === true)
                this.$data.interest = false
            else
                this.$data.interest = true
        },

        deliverResume() {
            let currentDate = new Date();
            let year = currentDate.getFullYear();
            let month = currentDate.getMonth() + 1;
            let day = currentDate.getDate();
            axios.post(`/seekers/recommend/recruit_information/deliver/${this.value}/${this.$store.state.recruitId}/${year}-${month}-${day}`
            ).then(res => {
                console.log(res);
                const h = this.$createElement;

                this.$notify({
                    title: '成功发送',
                    message: h('i', { style: 'color: teal' }, '您的简历已成功发至对方邮箱'),
                });
            }).catch(err => {
                console.log(err);
            })
        },
        gotoCompanyInfo() {
            this.$router.push('/CompanyInfo')
        },
        submit() {
            axios.post(`company/recruitdetail`,
                {
                    recruitId: this.$store.state.recruitId,
                    companyAccount: this.$store.state.companyAccount,
                    recruitName: this.PositionDetail.recruitName,
                    wage: this.PositionDetail.wage,
                    education: this.PositionDetail.wage,
                    workAction1: this.PositionDetail.workAction1,
                    workAction2: this.PositionDetail.workAction2,
                    welfare: this.PositionDetail.welfare,
                    requires: this.PositionDetail.requires,
                    responsibility: this.PositionDetail.responsibility,
                    descriptions: this.PositionDetail.descriptions
                }
            ).then(res => {
                console.log(res);
                console.log(this.PositionDetail);
            })
        },


    }
}
</script>

<style scoped>
.allbody {
    width: 1480px;
    height: 780px;
    background-color: rgb(227, 243, 246);
}

.header {
    background-color: rgb(0, 180, 179);
    width: 100%;
    height: 140px;

}

.edit,
.save {
    color: black;
    position: absolute;
    top: 50px;
    font-size: 20px;
    font-weight: 700;
}

.edit {
    right: 200px;
}



.position {
    position: absolute;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}

.salary {
    position: absolute;
    top: 15px;
    left: 230px;
    color: red;
    font-size: 20px;
    font-weight: 600;
}

.interest {
    position: absolute;
    top: 60px;
    cursor: pointer;
}

.submit_resume {
    position: absolute;
    top: 60px;
    left: 150px;
}

.job_activities {
    position: absolute;
    width: 60%;
    height: 100px;

    top: 30px;
    left: 100px;
}

.job_activities {
    color: #fff;
    margin-left: 500px;
}

.activity_1 {
    display: block;
    float: left;
    margin-top: 40px;
}

.activity_2 {
    display: block;
    float: left;
    margin-top: 40px;
    margin-left: 100px;
}

.icon {
    width: 4em;
    height: 4em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 7px;
}

.left {
    position: absolute;
    height: 80%;
    width: 1050px;
    top: 150px;
    left: 100px;
    background-color: #fff;
    border-radius: 20px;

}

.job_text {
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 28px;
    color: #333;
    font-size: 15px;
    text-align: justify;
    letter-spacing: 0;
}

.job_text p {
    margin-left: 40px;
}

.right {
    position: absolute;
    height: 60%;
    width: 300px;
    top: 150px;
    left: 1200px;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    transition: background;
    transition: box-shadow 0.5s ease-in-out;

}

.right:hover {
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
}

.right:hover #companyBasis {
    color: rgb(0, 180, 179);
    font-weight: 700;
}

#companyBasis {
    position: absolute;
    display: block;
    top: 20px;
    left: 20px;
    font-size: 17px;
    font-weight: 400;
    transition: color 0.5s ease-in-out, font-weight 0.1s ease-in-out;
}

.right_item {
    flex-basis: 10%;
}

#btn_deliver {
    position: absolute;
    color: black;
    top: 8vh;
    left: 30vw;
    font-size: 18px;
    transition: font-size 0.5s ease-in-out;
}

#btn_deliver:hover {
    font-size: 22px;
}
</style>